import Vue from 'vue'
import VueRouter from 'vue-router'
import Recommend from '../views/Recommend'
import Rink from '../views/Rink'
import Songs from '../views/Songs'
import Songer from '../views/Songer'
import Radio from '../views/Radio'
import Mv from '../views/Mv'
import Dishes from '../views/Dishes'
import Home from '../views/Home'
import MyMusic from '../views/MyMusic'
import MyFriend from '../views/MyFriend'
import Download from '../views/Download'
import MyHome from '../views/MyHome'
import Detail from '../components/Detail'
import Music from '../components/Music'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    redirect: '/home/recommend',
    component: Home,
    meta: {
      isMenu: true
    },
    children: [
      {
        path: '/home/recommend',
        name: 'Recommend',
        component: Recommend
      },
      {
        path: 'rink',
        name: 'Rink',
        component: Rink
      },
      {
        path: 'songs',
        name: 'Songs',
        component: Songs
      },
      {
        path: 'songer',
        name: 'Songer',
        component: Songer
      },
      {
        path: 'radio',
        name: 'Radio',
        component: Radio
      },
      {
        path: 'mv',
        name: 'Mv',
        component: Mv
      },
      {
        path: 'dishes',
        name: 'Dishes',
        component: Dishes
      }
    ]
  },
  {
    path: '/mymusic',
    name: 'MyMusic',
    component: MyMusic
  },
  {
    path: '/myfriend',
    name: 'MyFriend',
    component: MyFriend
  },
  {
    path: '/download',
    name: 'Download',
    component: Download
  },
  {
    path: '/myhome',
    name: 'MyHome',
    component: MyHome
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail,
    props: true
  },
  {
    path: '/music/:id',
    name: 'Music',
    component: Music,
    props: true
  }
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
